@mixin centerbox {
  display: flex;
  align-items: center;
  justify-content: center;
}

.mbti {
  width: 100vw;
  min-height: 100vh;
  box-sizing: border-box;
  background: hsl(306, 31%, 94%);
  padding: 16px;

  .content {
    width: 100%;
    height: auto;
    position: relative;
    z-index: 2;
    background: transparent;
    .title {
      font-weight: bold;
      font-size: 24px;
      text-align: center;
      margin-bottom: 16px;
    }

    .tit_desc {
      color: gray;
      font-size: 12px;
      text-align: center;
      margin-bottom: 16px;
    }
    .tit_tag {
      width: 100%;
      height: auto;
      @include centerbox;
      .tag_item {
        @include centerbox;
        margin-right: 8px;
        box-sizing: border-box;
        padding: 10px 8px;
        background: white;
        border-radius: 10px;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加立体阴影 */
        font-size: 14px;
        .icon {
          margin-right: 2px;
        }
      }
    }

    .startbtn {
      width: 100px;
      margin: 16px auto;
      box-sizing: border-box;
      padding: 10px 10px;
      @include centerbox();
      border-radius: 20px;
      background: linear-gradient(
        to right,
        #8e2de2,
        #ec29d1
      ); // 水平渐变从紫色到粉色
      color: white;
      font-weight: bold;
    }

    .progressText {
      box-sizing: border-box;
      padding: 0 4px;
      display: flex;
      align-items: center;
      justify-content: space-between;
      margin-top: 22px;
      margin-bottom: 8px;
      .text {
        color: gray;
      }
      .percent {
        color: #8e2de2;
      }
    }

    .quesCard {
      margin-top: 16px;
      background: white;
      box-sizing: border-box;
      width: 100%;
      min-height: 190px;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加立体阴影 */
      padding: 16px;
      border-radius: 20px;
      margin-bottom: 20px;
      .q_head {
        font-size: 15px;
        color: #8e2de2;
        margin-bottom: 10px;
      }
      .q_text {
        font-weight: bold;
        margin-bottom: 10px;
      }
      :deep(.checklist-box.is--button) {
        padding: 10px 12px;
        border-radius: 12px;
      }
    }

    .btn_group {
      width: 100%;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .prevBtn {
        border-radius: 32px;
        width: 120px;
        height: 50px;
        background: white;
        @include centerbox;
        font-weight: 600;
      }
      .nextBtn {
        @include centerbox;
        border-radius: 32px;
        width: 120px;
        height: 50px;
        background: linear-gradient(
          to right,
          #8e2de2,
          #ec29d1
        ); // 水平渐变从紫色到粉色
        color: white;
        font-weight: 600;
        transition: all 0.3s ease-in-out;
      }
    }

    .resultCard {
      width: 100%;
      height: auto;
      box-sizing: border-box;
      border-radius: 16px;
      background: white;
      box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* 添加立体阴影 */
      margin-top: 20px;
      .r_head {
        width: 100%;
        height: 120px;
        box-sizing: border-box;
        background: linear-gradient(
          to right,
          #8e2de2,
          #ec29d1
        ); // 水平渐变从紫色到粉色
        color: white;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        align-items: center;
        border-top-left-radius: 16px;
        border-top-right-radius: 16px;
        box-sizing: border-box;
        padding: 8px 0;
        .boldtext {
          font-weight: bold;
          font-size: 20px;
        }
      }
      .r_main {
        width: 100%;
        height: auto;
        box-sizing: border-box;
        padding: 16px;
        color: #8b9097;

        .r_one {
          width: 100%;
          display: flex;

          justify-content: space-between;
          font-size: 10px;
          .left {
            width: 49%;
            .rl_title {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 10px;
              font-weight: bold;
              color: #333333;
              font-size: 18px;
            }
            .rl_textArea {
              line-height: 16px;
            }
          }
          .right {
            width: 49%;
            .rr_title {
              display: flex;
              align-items: center;
              justify-content: flex-start;
              margin-bottom: 10px;
              font-weight: bold;
              color: #333333;
              font-size: 18px;
            }
            .rr_list {
              width: 100%;

              .rrl_item {
                display: flex;
                align-items: center;
                justify-content: flex-start;
                margin-bottom: 5px;
                .check {
                  margin-right: 2px;
                }
              }
            }
          }
        }
        .emotion_tags {
          .e_title {
            width: 100%;
            font-weight: bold;
            color: #333333;
            font-size: 18px;
            margin-bottom: 10px;
          }
          .tag_group {
            display: flex;
            flex-wrap: wrap;
            justify-content: flex-start;
            .tag_item {
              box-sizing: border-box;
              padding: 4px 12px;
              color: #bb98f8;
              background: #f2ebfd;
              border-radius: 20px;
              margin-right: 4px;
              font-size: 12px;
              font-weight: 400;
              margin-bottom: 4px;
            }
          }
        }

        .suggest {
          margin-top: 14px;
          width: 100%;
          height: auto;
          box-sizing: border-box;
          padding: 16px;
          background: #f9fafb;
          border-radius: 10px;
          .s_title {
            width: 100%;
            font-weight: bold;
            color: #333333;
            font-size: 16px;
            margin-bottom: 10px;
          }
          .s_content {
            font-style: italic;
            font-size: 12px;
            font-weight: 400;
            line-height: 16px;
          }
        }
      }
    }
  }
}

.btn_active {
  transform: scale(0.95);
  opacity: 0.8;
}

/* 水滴主体 */
.water-drop {
  position: fixed;
  width: 150px;
  height: 140px;
  top: 20px;
  left: -40px;
  z-index: 1;
  /* 径向渐变模拟水滴光泽 */
  background: #f5c8e0;
  /* 不规则圆角创建水滴基本形状 */
  border-radius: 45% 55% 70% 30% / 45% 45% 55% 55%;
  /* 内外阴影增强立体感 */
  // box-shadow: inset -10px -10px 15px rgba(0, 0, 0, 0.1),
  //   0 5px 15px rgba(0, 0, 0, 0.1);
  /* 应用蠕动动画 */
  animation: squirm 3s infinite ease-in-out;
}

.wd2 {
  background: #dec6f0;
  top: 70vh;
  left: 260px;
}

/* 水滴蠕动动画 */
@keyframes squirm {
  0%,
  100% {
    border-radius: 45% 55% 70% 30% / 45% 45% 55% 55%;
    transform: scale(1) rotate(0deg);
  }
  25% {
    border-radius: 55% 45% 30% 70% / 55% 55% 45% 45%;
    transform: scale(1.03) rotate(2deg);
  }
  50% {
    border-radius: 60% 40% 50% 50% / 60% 40% 60% 40%;
    transform: scale(1) rotate(0deg);
  }
  75% {
    border-radius: 40% 60% 60% 40% / 40% 60% 40% 60%;
    transform: scale(1.03) rotate(-2deg);
  }
}
